<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系人</title>
</head>
<body>
    <div style="float: left;width: 20%;">
        <ul>
            {% for item in contact_list.MemberList %}
                <li username="{{ item.UserName }}">{{ item.NickName }}</li>
            {% endfor %}
        </ul>
    </div>
    <div style="float: right;height: 20%;">
        <p><input id="toUser" type="text" placeholder="收消息用户" /></p>
        <p><textarea id="msg" placeholder="请输入消息"></textarea></p>
        <p><input id="btn" type="button" value="发送"/></p>
    </div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        bindLi()
       bindSendMsg()
        getMsg()
    });
    function bindSendMsg() {
        $('#btn').click(function () {
            $.ajax({
                url:'/sendmsg.html',
                type:'GET',
                data:{'toUser':$('#toUser').val(),'msg':$('#msg').val()},
                dataType:'JSON',
                success:function(arg){

                }
            })
        })
    }
    function bindLi() {
        $('li').dblclick(function () {
          var v = $(this).attr('username');
          $('#toUser').val(v);
        })
    }
    function getMsg() {
        $.ajax({
            url:'/get-msg.html',
            type:'GET',
            dataType:'JSON',
            success:function(arg){
                console.log(arg);
                getMsg()
                }
            })
    }
</script>
</body>
</html>